iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0
自我挑戰組

自我挑戰日記系列 第 16

CSS:parallax scrolling 視差滾動

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

今天要用固定背景
作出滑鼠向下滾動換背景
像是下列範例
https://codepen.io/stefanjudis/pen/nrzHI

parallax 說明
使用容器元素並將背景圖像添加到具有特定高度的容器中。然後使用background-attachment: fixed創建實際的視差效果。其他背景屬性用於完美地對圖像進行居中和縮放
出處:https://www.w3schools.com/howto/howto_css_parallax.asp

<div class="parallax"></div>
<div class="text">文章</div>
.parallax{
    background-image: url("圖像");
    min-height: 500px; 
    /* 沒內文時可以看到的最小高度 */

    background-attachment: fixed; /* 固定圖像 */
    background-position: center center; /* 圖像置中 */
    background-size: cover;
}

當文章的背景非透明時
向下滾動就會看到背景不動
文章向上蓋掉背景

背景2個以上時
因為設定差別只在圖像不同
所以也可以簡化 CSS 把圖像和固定屬性分開

<div class="parallax img-1"></div>
<div class="text">文章</div>
<div class="parallax img-2"></div>
<div class="text">文章</div>
<div class="parallax img-3"></div>
<div class="text">文章</div>
.parallax{
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
.img-1{
    background-image: url("圖像");
}
.img-2{
    background-image: url("圖像");
}
.img-3{
    background-image: url("圖像");
}

之後要增加、刪減圖像就不會太大一串

接下來的例子同上
https://codyhouse.co/demo/page-scroll-effects/fixed.html
另外也有其他效果
像是翻頁的特效
努力試到了大半夜
還是作不出來/images/emoticon/emoticon56.gif

最後才發現一開始就搞錯了
https://codyhouse.co/gem/page-scroll-effects/

原來 Velocity.js 不是說存成 Velocity.js
而這是作效果的插件/images/emoticon/emoticon46.gif

Velocity.js 資料
英文: http://velocityjs.org/
中文: http://www.mrfront.com/docs/velocity.js/

恩,這翻頁的特效滿有趣的
給大家參考看看

--- 明日待續。


上一篇
CSS:box-reflect 顛倒文字
下一篇
CSS:Ribbon 緞帶標籤
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
圓頭人
iT邦研究生 5 級 ‧ 2018-10-04 13:22:09

哇~這看起來好酷啊~~

我要留言

立即登入留言